<script setup lang="ts">
function handleContainerClick() {
  console.log("外部容器被点击");
}

function handleButtonClick(event: MouseEvent) {
  console.log("按钮被点击，事件冒泡被阻止了");
}

function handleFormSumitClick(event: Event) {
  console.log("表单被提交，默认提交行为被阻止了");
}
</script>

<template>
  <div class="contain" @click="handleContainerClick">
    <button @click.stop="handleButtonClick">点击我（阻止冒泡）</button>
    <form @submit.prevent="handleFormSumitClick">
      <button type="submit">提交表单，（阻止默认行为）</button>
    </form>
    <p>点击按钮不会触发外部容器的点击事件（由于 .stop 修饰符）。</p>
    <p>提交表单不会刷新页面（由于 .prevent 修饰符）。</p>
  </div>
</template>
